<html>
  <head>
  
  <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
  <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
  
  <title>Test Aup</title>
  	<script src="js/aupQuery.js"></script>
	<script src="js/aup.js"></script>
	<style>
		.color_red {
			color:red;
		}
		.color_blue {
			color:blue;
		}
	</style>
	<script>
		
		function loadAup(){
			
			var context = {};
			
			context.color = 'red'
  			
			context.megaVar = [];
			for(var i = 0; i < 1000; i++){
				var obj = {};
				for(var j = 0; j < 15; j++){
					var key = 'prop' + j;
					obj[key] = Math.ceil(1000 * Math.random());
				}
				context.megaVar.push(obj);
			}
			
  			context.again = function(data){ 
  				//if(context.color == 'red') context.color = 'blue';
  				//else context.color = 'red';
  				
  				for(var i = 0; i < 990; i++){
  					context.megaVar.pop();
  				}
  			}
  			
  			aup.start(context);
  			
			
		}
	
	
	</script>
  	
  </head>
  <body onload="loadAup()">
 	
   	<table  id ="table" >
		
		<tbody class='color_${color}'  forEach='v in megaVar' events='click: again' >
        	<tr >
            	<td>${v.prop0}</td>
            	<td>${v.prop1}</td>
            	<td>${v.prop2}</td>
            	<td>${v.prop3}</td>
            	<td>${v.prop4}</td>
            	<td>${v.prop5}</td>
            	<td>${v.prop6}</td>
            	<td>${v.prop7}</td>
            	<td>${v.prop8}</td>
            	<td>${v.prop9}</td>
            	<td>${v.prop10}</td>
            	<td>${v.prop11}</td>
            	<td>${v.prop12}</td>
            	<td>${v.prop13}</td>
            	<td>${v.prop14}</td>
            	
            	
            </tr>
    	</tbody>
    </table>
    <br>
 	
 </body>
  

</html>